<template>
    <div class="reach-dialog">
        <el-dialog
            :title="title"
            :close-on-click-modal="false"
            :visible.sync="dialogFormVisible"
            width="590px"
        >
            <el-form ref="reach" class="dialog-form" :model="form" :rules="rules" @submit.native.prevent>
                <el-form-item label="达成度名称：" prop="name" :label-width="formLabelWidth">
                    <el-input
                        v-model.trim="form.name"
                        type="text"
                        placeholder="输入名称"
                        maxlength="15"
                        show-word-limit
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="设置达成度分数：" :label-width="formLabelWidth">
                    <el-input-number
                        v-model.trim="form.thresholdValue"
                        controls-position="right"
                        placeholder="注：满分默认100分"
                        :precision="0"
                        :min="1"
                        :max="100"
                    >

                    </el-input-number>
                </el-form-item>
                <el-form-item label="负责人：" prop="principal" :label-width="formLabelWidth">
                    <el-input
                        v-model.trim="form.principal"
                        type="text"
                        placeholder="请输入负责人"
                        maxlength="10"
                        show-word-limit
                    >
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    :loading="loading"
                    size="small"
                    class="btn-hover"
                    @keyup.enter.native="sub('reach')"
                    @click="sub('reach')"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>

import { addCourseReach, copyCourseReach } from '../../../../../api/courseReach';

export default {
    data() {
        return {
            type: 1,
            title: '',
            dialogFormVisible: false,
            loading: false,
            form: {
                courseId: '',
                id: '',
                name: '',
                principal: '',
                thresholdValue: undefined
            },
            formLabelWidth: '125px',
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                principal: [
                    { required: true, message: '请输入负责人', trigger: 'blur' }
                ]
            }
        };
    },

    methods: {
        init(type, item, cid) {
            const { name } = this.$store.state.user;
            this.title = type == 1 ? '添加达成度' : '复制达成度';
            this.type = type;
            this.form.courseId = cid;
            if (type == 2) {
                const { id, name, principal } = item;
                this.form.id = id;
                this.form.name = name;
                this.form.thresholdValue = undefined;
                this.form.principal = principal;
            } else {
                this.form.name = '';
                this.form.thresholdValue = undefined;
                this.form.principal = name;
            }

            this.dialogFormVisible = true;

        },

        sub(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    if(this.type == 1) {
                        this.add();
                    } else {
                        this.copy();
                    }

                } else {
                    return false;
                }
            });
        },

        add() {
            const { courseId, name, principal, thresholdValue } = this.form;
            const iconValue = parseInt((Math.random()*3)+1);
            addCourseReach({ courseId, name, principal, thresholdValue, iconValue  }).then(res => {
                this.$emit('refresh');
                this.dialogFormVisible = false;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        },

        copy() {
            copyCourseReach(this.form).then(res => {
                this.$emit('refresh');
                this.dialogFormVisible = false;
                this.loading = false;
            }).catch(() => {
                this.loading = false;
            })
        }
    }
};
</script>

<style lang="scss">
.reach-dialog {
    .dialog-form {
        padding: 26px 62px 0 37px;
    }

    .el-input__suffix {
        top: 1px;
        height: 30px;
        overflow: hidden;
    }

    .el-dialog__body {
        padding-bottom: 0;
    }

    .el-input__inner {
        width: 100%;
    }

    .el-input-number {
        width: 100%;
        line-height: 31px;
        .el-input__inner {
            text-align: left;
        }
    }

    .el-input-number__increase,.el-input-number__decrease {
        line-height: 15px !important;
    }

    .el-form-item__content {
        line-height: 30px;
    }

    .el-dialog__footer {
        padding-top: 8px;
    }

    .dialog-footer {
        text-align: center;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff !important;
    }
}
</style>
